<template>
	<view style="padding-top: 20upx;">
		<view class="webkit list">
			<view class="title">银行卡号</view>
			<input type="text"  class="flex" v-model="bankcard" placeholder="请输入银行卡号" placeholder-style="color:#aaa;font-size:30upx" />
		</view>
		<view class="webkit list">
			<view class="title">银行名称</view>
			<input type="text" class="flex"  v-model="bankname" placeholder="请输入银行名称" placeholder-style="color:#aaa;font-size:30upx" />
		</view>
		<view class="webkit list">
			<view class="title">支行名称</view>
			<input type="text" class="flex" v-model="zhihang" placeholder="请输入支行名称" placeholder-style="color:#aaa;font-size:30upx" />
		</view>
		<!-- <view class="webkit list">
			<view class="title">身份证号</view>
			<input type="number" @input="idcardInput" class="flex" v-model="idcard" placeholder="请输入身份证号" placeholder-style="color:#aaa;font-size:30upx" />
		</view> -->
		<!-- <view class="webkit list">
			<view class="title">预留手机号</view>
			<input type="number" @input="telephoneInput" class="flex" v-model="telephone" placeholder="请输入预留手机号" placeholder-style="color:#aaa;font-size:30upx" />
		</view> -->
		<view class="webkit list">
			<view class="title">开户姓名</view>
			<input type="text"  class="flex" v-model="bankpeople" placeholder="请输入开户人姓名" placeholder-style="color:#aaa;font-size:30upx" />
		</view>
		<view style="height: 160upx;line-height: 160upx;position: relative;background-color: #FFFFFF;"  @click="chooseImage">
			<text style="padding-left: 20upx;font-size: 30upx;color: #666;">上传支付宝收款码</text>
			<view style="position: absolute;top: 20upx;right: 20upx;border-radius: 60upx;">
				<image :src="alipayimg || '../../../static/sc.png'" style="width: 120upx;height: 120upx;"></image>
			</view>
		</view>
		<view style="height: 160upx;line-height: 160upx;position: relative;background-color: #FFFFFF;"  @click="chooseImage1">
			<text style="padding-left: 20upx;font-size: 30upx;color: #666;">上传微信收款码</text>
			<view style="position: absolute;top: 20upx;right: 20upx;border-radius: 60upx;">
				<image :src="wechatimg || '../../../static/sc.png'" style="width: 120upx;height: 120upx;"></image>
			</view>
		</view>
		<view style="padding: 0 24upx;">
			<button type="primary" style="background-color: #05052B; margin-top: 20upx;" @click="submit" :loading="loading">确认提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bankname: '',
				acc_no: '',
				bankpeople:'',
				openid: '',
				zhihang: '',
				bankcardname:'',
				bankcard:'',
				idcard:'',
				telephone:'',
				name:'',
				loading: false,
				alipayimg:'',
				wechatimg:'',
			};
		},
		onLoad:function(){
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					
					this.openid = res.data
					this.setajax()
					// console.log(this.openid)
				},
				fail: () => {
					uni.navigateTo({
						url: '../../login/login'
					});
				}
			});
		},
		methods:{
			setajax(){
					uni.request({
						url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=member.bind_bank&app=1',
						method: 'GET',
						data: {
							openid: this.openid,
						},
						header: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						success: res => {
							console.log(res)
							this.bankcard = res.data.acc_no
							this.bankname = res.data.bankname
							this.bankpeople = res.data.bankpeople
							this.zhihang = res.data.zhihang
							this.alipayimg = res.data.alipayimg
							this.wechatimg = res.data.wechatimg
						},
						fail: () => {},
						complete: () => {}
					});
				},
			chooseImage(){
				var _this = this
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album'], //从相册选择
				    success: function (res) {
							let file = res.tempFilePaths
							var images = []
							var img = []
							// console.log(file)
							for(var i = 0; i<res.tempFilePaths.length; i++) {
								uni.uploadFile({
									url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=util.uploader&app=1',
									//仅为示例，非真实的接口地址
									filePath: file[i],
									name: 'file',
									formData: {
										'user': 'test'
									},
									success: (res) => {
										console.log(res)
										images.push(JSON.parse(res.data).url)
										_this.imagess = images
										
										_this.alipayimg = JSON.parse(res.data).url
										console.log(_this.alipayimg)
										img = img + JSON.parse(res.data).url + ';'
										_this.imgurl = img
									}
								});
							}
				    }
				});
			},
			chooseImage1(){
				var _this = this
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album'], //从相册选择
				    success: function (res) {
							let file = res.tempFilePaths
							var images = []
							var img = []
							// console.log(file)
							for(var i = 0; i<res.tempFilePaths.length; i++) {
								uni.uploadFile({
									url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=util.uploader&app=1',
									//仅为示例，非真实的接口地址
									filePath: file[i],
									name: 'file',
									formData: {
										'user': 'test'
									},
									success: (res) => {
										images.push(JSON.parse(res.data).url)
										_this.imagess = images
										_this.wechatimg = JSON.parse(res.data).url
										console.log(_this.wechatimg)
										img = img + JSON.parse(res.data).url + ';'
										_this.imgurl = img
									}
								});
							}
				    }
				});
			},
			submit(){
					uni.request({
						url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=member.bind_bank&app=1',
						method: 'POST',
						data: {
							bankname: this.bankname,
							acc_no: this.bankcard,
							bankpeople:this.bankpeople,
							openid: this.openid,
							zhihang: this.zhihang,
							wechatimg:this.wechatimg,
							alipayimg:this.alipayimg,
						},
						header: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						success: res => {
							console.log(res)
							uni.showToast({
								title: res.data.message,
								icon: "none"
							});
						},
						fail: () => {},
						complete: () => {}
					});
				},
		}	
		}
	
</script>

<style>
	.list{padding:16upx 24upx;background:#fff;position:relative;}.list:last-child:after{display:none;}.list:after{content:" ";position:absolute;left:20upx;right:20upx;bottom:-2upx;height:2upx;border-top:2upx solid #ebebeb;color:#D9D9D9;-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scaleY(0.5);-ms-transform:scaleY(0.5);transform:scaleY(0.5);}.list .title{width:150upx;line-height:50upx;color:#666;}.list .flex{line-height:50upx;color:#666;padding-left:24upx;}.inputright{width:200upx;height:52upx;}button.inputright{line-height:48upx;font-size:24upx;background:transparent;border:2upx solid #333;}</style>

